<template>
    <div class="content">
        <h3>书虫后台管理系统登录</h3>
        <el-input placeholder="请输入管理员帐号"  v-model="adminname" ></el-input>
        <el-input type="password" placeholder="请输入密码"  v-model="adminpassword" ></el-input>
        <el-button type="primary" @click="login">登录</el-button>
    </div>
</template>
<script>
    import { Message } from 'element-ui';
    import util from 'utility';
    export default {
        data:function () {
            return {
                adminname:'',
                adminpassword:''
            }
        },
        methods:{
            login:function () {
                //将密码加密
                var adminpassword = util.md5(this.adminpassword+this.adminname);
                //发送ajax，带上帐号和密码
                this.$http.post('http://localhost/api/login',{adminname:this.adminname,adminpassword:adminpassword},{emulateJSON:true}).then(function (result) {
                    if(result.body.message == "登录成功"){
                        console.log(result);
                        sessionStorage.setItem('adminPower',result.body.adminPower);
                        //跳到管理系统页面
                        this.$router.push({path:'/App'});
                    }else{
                        //提示用户密码或者用户名不正确
                        Message({
                            type:'error',
                            message:result.body.message
                        });
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        background: rgba(0,0,0,0.3);
    }
    .content{
        width: 600px;
        height:300px;
        margin: 200px auto;
        border:1px solid #ffffff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #ffffff;
        padding: 20px;
        background-color: #fff;
    }
    .content>h3{
        width: 100%;
        margin: 20px;
        text-align: center;
        font-size: 26px;
        font-family: "microsoft yahei";
    }
    .el-input{
        margin:20px 0;
    }

</style>